<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>goto_Modular插件方法菜单标识</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/element_UI.css">
		<link rel="stylesheet" href="../../css/jinJieShiYong/goto_modular_cascader.css">
		<script src="../../javaScript/vue.js"></script>
		<script src="../../javaScript/element_UI.js"></script>
		<script src="../../javaScript/jquery-3.4.1.js"></script>
	</head>
	<body>
		<div id="app">
			<el-row>
				<el-col :span="20" id="app-box">
					<div class="main-box">
						<!-- 选择器 -->
						<el-cascader filterable clearable class="cascader-label" placeholder="示例：电子邮件" :options="options" value="value" @change="changeEvent" :props="{ checkStrictly: true }"></el-cascader>
						<!-- 表格 -->
						<el-table :data="tableData" border style="width: 100%" class="table-box" empty-text="可通过上方菜单进行选择">
							<el-table-column prop="firstIden" label="一级模块"></el-table-column>
							<el-table-column prop="secondIden" label="二级模块"></el-table-column>
						    <el-table-column prop="thirdIden" label="三级模块"></el-table-column>
							<el-table-column prop="tagIden" label="四级模块"></el-table-column>
						  </el-table>
						<!-- 代码块 -->
						<div class="code-box two-row">
							<span class="code-box-tips"># 全局：</span>
							<p class="code-box-text">
								<span style="font-weight: bold; color: #00eb1b; margin-right: 10px;">json: </span>
								{{codeBoxText}}
							</p>
							<p class="code-box-text" style="top: 15vh;">
								<span style="font-weight: bold; color: #00eb1b; margin-right: 10px;">list: </span>
								{{codeBoxListText}}
							</p>
						</div>
						<!-- 代码块 -->
						<div class="code-box">
							<span class="code-box-tips"># 局部：</span>
							<p class="code-box-text">{{codeBoxSText}}</p>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						options: [],
						tableData: [],
						codeBoxText: "可通过上方菜单进行选择",
						codeBoxListText: "可通过上方菜单进行选择",
						codeBoxSText: "可通过上方菜单进行选择"
					}
				},
				// 生命周期钩子-挂载后执行
				mounted() {this.loadAll();},
				methods:{
					changeEvent(value) {
						console.log(value);
						var that = this;
						var that_code_text = '';  // 全局刷新预设文本json
						var that_code_list_text = '';  // 全局刷新预设文本list
						var that_code_s_text = '';  // 局部刷新预设文本
						var that_table_data = {};  // 表格值预设文本
						var codeTextIden = ['firstIden', 'secondIden', 'thirdIden', 'tagIden'];
						if (value.length != 0){
							var regPos =  /^[0-9]+.?[0-9]*/; //判断是否是数字。
							// 全局刷新数据处理
							for (var index=0; index<value.length; index++) {
								var key = codeTextIden[index];
								var val = value[index];
								if (regPos.test(val) && key != "tagIden") {
									that_code_text += "'" + codeTextIden[index + 1] + "': " + "'" + value[index] + "', ";
								} else {
									// 正常
									that_code_text += "'" + key + "': " + "'" + val + "', "
									that_code_list_text += "'" + val + "', "
								}
								that_table_data[key] = val;
							}
							// 局部刷新数据处理
							if (regPos.test(value[value.length-1])) {
								that_code_s_text += "{'tagIden':" + value[value.length-1] + ", " + "'localSwitch': True}";
							} else {
								that_code_s_text += "{'localSwitch': True}";
							}
							// 处理后的数据赋值
							var dex = that_code_text.lastIndexOf(',');
							var dexl = that_code_list_text.lastIndexOf(',');
							that.codeBoxText = "{" + that_code_text.substring(0, dex) + "}";
							that.tableData = [];
							that.tableData.push(that_table_data);
							that.codeBoxSText = that_code_s_text;
							if (value.length == 3 && regPos.test(value[value.length-1])) {
								that.codeBoxListText = "不支持";
							} else {
								that.codeBoxListText = "[" + that_code_list_text.substring(0, dexl) +"]";	
							}
						} else {
							that.tableData = [];
							that.codeBoxText = "可通过上方菜单进行选择";
							that.codeBoxListText = "可通过上方菜单进行选择";
							that.codeBoxSText = "可通过上方菜单进行选择";
						}
					},
					loadAll() {
						var that = this;
						var that_array = [];
						$.getJSON("../../data/modularInformation.json",
							function (data) {
								var index = 0;
								for (var key in data) {
									that_array.push({"value": key, "label": data[key]['selfLocatin'], "children": []});
									var index_s = 0;
									for (var key_s in data[key]['subordinate']) {
										that_array[index]['children'].push({
											"value": key_s, 
											"label": data[key]['subordinate'][key_s]['iframe'],
										});
										if (data[key]['subordinate'][key_s]['submodule']) {
											that_array[index]['children'][index_s]['children'] = [];
											var index_s_s = 0;
											for (var sub_key in data[key]['subordinate'][key_s]['submodule']) {
												that_array[index]['children'][index_s]['children'].push({
													"value": sub_key,
													"label": data[key]['subordinate'][key_s]['submodule'][sub_key]['thisIframe'],
												});
												if  (data[key]['subordinate'][key_s]['submodule'][sub_key]['thisTag']) {
													that_array[index]['children'][index_s]['children'][index_s_s]['children'] = [];
													for(var tag_s_item in data[key]['subordinate'][key_s]['submodule'][sub_key]['thisTag']){
														that_array[index]['children'][index_s]['children'][index_s_s]['children'].push({
															"value": data[key]['subordinate'][key_s]['submodule'][sub_key]['thisTag'][tag_s_item][0],
															"label": data[key]['subordinate'][key_s]['submodule'][sub_key]['thisTag'][tag_s_item][1]
														});
													}	
												}
												index_s_s += 1;
											}
										} else if (data[key]['subordinate'][key_s]['tagPage']) {
											that_array[index]['children'][index_s]['children'] = [];
											for (var tag_item in data[key]['subordinate'][key_s]['tagPage']){
												that_array[index]['children'][index_s]['children'].push({
													"value": data[key]['subordinate'][key_s]['tagPage'][tag_item][0],
													"label": data[key]['subordinate'][key_s]['tagPage'][tag_item][1],
												});
											}
										};
										index_s += 1;
									}
									index += 1;
								}
								that.options = that_array;
							}
						)
					}
				}
			})
		</script>
	</body>
</html>